<!-- 新版本商品卡片 -->
<style type="text/less" lang="less" scoped>
.ff-card {
    border-radius: 8px 8px 4px 4px;
    border: 1px solid #DCDCDC;
    position: relative;
    background-color: #fff;
    transition: border-color .5s;
    &-delete {
        position: absolute;
        display: none;
        width: 18px;
        height: 18px;
        right: -11px;
        top: -11px;
        color: #FF0C00;
        z-index: 1;
        .iconfont {
            font-size: 18px;
        }
    }
    &-active {
        border-color: #fd6442;
    }
    &-hover:hover {
        border-color: #fd6442;
    }
    &:hover {
        .ff-card-delete {
            display: block;
        }
        .ff-card-collection {
            display: block;
        }
    }
    &-image {
        border-radius: 8px 8px 0 0;
        position: relative;
        overflow: hidden;
        &-box {
            height: 100%;
            img {
                width: 100%;
                height: 100%;
                //object-fit: cover;
            }
        }
    }
    &-collection {
        position: absolute;
        display: none;
        top: 6px;
        left: 4px;
        padding: 3px;
        border-radius: 4px;
        background-color: #fff;
        cursor: pointer;
        .iconfont {
            font-size: 15px;
            text-align: center;
            color: #888;
        }
        .icon-yishoucang {
            color: #FD6442;
        }
    }
    &-cover {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba( 0, 0, 0, .4);
        color: #fff;
        font-weight: 400;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        padding: 5px 6px;
    }
    &-detail {
        &-images {
            height: 32px;
            box-sizing: border-box;
            margin: 1px 1px 0;
            padding: 0 17px;
            position: relative;
            &-swiper {
                overflow: hidden;
                /deep/.swiper-wrapper {
                    display: flex;
                }
            }
            &--single {
                display: block;
                box-sizing: border-box;
                width: 30px;
                height: 32px;
                text-align: center;
                border: 1px solid transparent;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }
            &-prev, &-next {
                position: absolute;
                top: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 16px;
                height: 100%;
                background-color: #999;
                color: #fff;
                cursor: pointer;
                outline: none;
            }
            &-prev {
                left: 0;
            }
            &-next {
                right: 0;
            }
            &-active {
                border-color: #E80000;
            }
            .swiper-button-disabled {
                background-color: #ccc;
            }
        }
        &-price {
            text-align: center;
            font-weight: 400;
            padding: 8px 0;
            &-now {
                font-size: 16px;
                margin-right: 8px;
                color: #E80000;
            }
            &-old {
                font-size: 12px;
                text-decoration: line-through;
                color: #AAA;
            }
        }
        &-count {
            padding: 0 0 6px 6px;
            display: flex;
            align-items: center;
            &-text {
                margin-left: 13px;
                color: #333;
                span {
                    color: #FD6442;
                    font-weight: 400;
                    margin: 0 10px;
                    font-size: 14px;
                }
            }
            &-action {
                cursor: pointer;
                color: #fff;
                font-size: 12px;
                margin-left: 3px;
                .iconfont {
                    color: #FD6442;
                }
                span {
                    display: none;
                    font-weight: 400;
                    background-color: #FF6B49;
                    padding: 0 2px;
                }
                &:hover {
                    .iconfont {
                        display: none;
                    }
                    span {
                        display: inline;
                    }
                }
            }
            &-popover {
                font-size: 12px;
            }
        }
        &-commodity {
            text-align: center;
            color: #333;
            padding-bottom: 10px;
            span {
                margin-right: 6px;
            }
        }
        &-btn {
            height: 31px;
            line-height: 31px;
            background-color: #F6F8FA;
            color: #666;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            border-radius: 0 0 4px 4px;
            cursor: pointer;
            transition: all .5s;
            &:hover {
                opacity: .7;
            }
            &-disabled {
                cursor: not-allowed;
                color: #aaa;
                &:hover {
                    opacity: 1;
                }
            }
        }
    }
}
</style>
<style type="text/css" lang="less" module>
    .ff-card-checked-disabled {
        display: inline-block;
        box-sizing: border-box;
        border-radius: 2px;
        border: 1px solid #ccc;
        width: 15px;
        height: 15px;
        background-color: #ccc;
    }
</style>
<template>
    <div class="ff-card"
         :style="{ width: cardWidth }"
         :class="{ 'ff-card-active': !disabled && value, 'ff-card-hover': !disabled && isHoverActive }"
         @click="handleActive"
    >
        <span class="ff-card-delete" v-if="showDelete" @click="handleDelete">
            <i class="iconfont icon-shanchu"></i>
        </span>
        <div class="ff-card-image" :style="imgStyle">
            <div class="ff-card-image-box" @click.stop="goCommodity">
                <img v-lazy="`${imageLink}?x-oss-process=image/resize,m_pad,h_140,w_160`" />
            </div>
            <div v-if="showColl" class="ff-card-collection" @click.stop="collectedClick">
                <i class="iconfont icon-shoucang" :class="{ 'icon-yishoucang': collected }"></i>
            </div>
            <div class="ff-card-cover">
                <span class="left-text">{{coverLeftText}}</span>
                <span class="right-text">{{coverRightText}}</span>
            </div>
            <slot name="nature"></slot>
            <slot name="tag"></slot>
        </div>
        <div class="ff-card-detail">
            <slot>
                <div class="ff-card-detail-images">
                    <swiper :options="swiperOption" class="ff-card-detail-images-swiper" ref="mySwiper">
                        <swiper-slide
                            :key="index"
                            v-for="(item, index) of imgLists"
                        >
                            <span
                                class="ff-card-detail-images--single"
                                :class="{ 'ff-card-detail-images-active': index === imgActive }"
                                @mouseover="imgSelect(index)"
                            >
                                <img class="swiper_img" v-lazy="`${item.src}?x-oss-process=image/resize,m_pad,h_30,w_28`" alt="" />
                            </span>
                        </swiper-slide>
                    </swiper>
                    <div class="ff-card-detail-images-prev" slot="button-prev" :class="`prev-${logo}`"><i class="iconfont icon-zuojiantou"></i></div>
                    <div class="ff-card-detail-images-next" slot="button-next" :class="`next-${logo}`"><i class="iconfont icon-youjiantou"></i></div>
                </div>
                <div class="ff-card-detail-price">
                    <span class="ff-card-detail-price-now">￥{{nowPrice}}</span>
                    <span class="ff-card-detail-price-old">￥{{oldPrice}}</span>
                </div>
                <div class="ff-card-detail-count">
                    <label>
                        <input type="checkbox" class="ff-table__checkbox" :checked="checked" @change="checkChange" :disabled="disabled" />
                        <span :class="disabled? $style['ff-card-checked-disabled']: 'ff-table__checked_copy'"></span>
                    </label>
                    <span class="ff-card-detail-count-text">可下单<span>{{count}}</span>件</span>
                    <el-popover
                        placement="top"
                        trigger="click"
                        v-if="!disabled"
                    >
                        <span class="ff-card-detail-count-action" slot="reference">
                            <i class="iconfont icon-bianji"></i>
                            <span>修改</span>
                        </span>
                        <slot name="popover"></slot>
                    </el-popover>
                </div>
                <div class="ff-card-detail-commodity">
                    <span>{{code}}</span>
                    <span>{{season}}</span>
                    <span style="color: #fd6442;">{{displayPos}}</span>
                </div>
                <div class="ff-card-detail-btn" v-if="btn" @click="handleBtn" :class="{'ff-card-detail-btn-disabled': btnDisabled}">换一款</div>
            </slot>
        </div>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'

    export default {
        props: {
            /* 卡片宽度 */
            width: {
                type: [ Number, String],
                default: 160
            },
            /* 图片高度 */
            height: {
                type: [ Number, String],
                default: 140
            },
            /* 图片链接 */
            imageUrl: {
                type: String,
                default: ''
            },
            /* 图片列表 */
            imgLists: {
                type: Array,
                default: () => []
            },
            /* 图片遮盖条左边内容 */
            coverLeftText: {
                type: String,
                default: ''
            },
            /* 图片遮盖条右边内容 */
            coverRightText: {
                type: String,
                default: ''
            },
            /* 是否显示收藏开关 */
            showColl: {
                type: Boolean,
                default: false
            },
            /* 是否已收藏 */
            collected: {
                type: Boolean,
                default: false
            },
            /* 显示删除开关 */
            showDelete: {
                type: Boolean,
                default: false
            },
            /* 是否移入高亮 */
            isHoverActive: {
                type: Boolean,
                default: true
            },
            /* 是否高亮 */
            value: {
                type: Boolean,
                default: false
            },
            /* 是否可以点击高亮 */
            canActive: {
                type: Boolean,
                default: false
            },
            /* 是否禁用 */
            disabled: {
                type: Boolean,
                default: false
            },
            /* 现商品价格 */
            nowPrice: {
                type: [String, Number],
                default: ''
            },
            /* 原商品价格 */
            oldPrice: {
                type: [String, Number],
                default: ''
            },
            /* 可下单数量 */
            count: {
                type: [ Number, String],
                default: ''
            },
            /* 是否选中 */
            checked: {
                type: Boolean,
                default: false
            },
            /* 商品编码 */
            code: {
                type: String,
                default: ''
            },
            /* 商品名称 */
            name: {
                type: String,
                default: ''
            },
            /* 季节 */
            season: {
                type: String,
                default: ''
            },
            /* 陈列位置 */
            displayPos: {
                type: String,
                default: ''
            },
            /* 底部按钮 */
            btn: {
                type: Boolean,
                default: false
            },
            /* 底部按钮置灰 */
            btnDisabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            let identifier = Math.round(Math.random() * 1000000000);
            return {
                imgActive: 0, // 图片激活下标
                logo: identifier, // 唯一标识符
                swiperOption: {
                    loop: false,
                    observer: true, // 修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true, // 修改swiper的父元素时，自动初始化swiper
                    spaceBetween: 1, //间距
                    direction: 'horizontal', // 轮播方向
                    onlyExternal: true, // 不允许拖动
                    slidesPerView: 4, // 一页展示几个
                    navigation: {
                        prevEl: `.prev-${identifier}`,
                        nextEl: `.next-${identifier}`,
                    }
                },
                popoverShow: false
            }
        },
        computed: {
            /* 卡片宽度 */
            cardWidth () {
                return `${this.width}px`;
            },
            /* 图片宽高 */
            imgStyle () {
                return {
                    width: `${this.width}px`,
                    height: `${this.height}px`
                }
            },
            /* 大图展示 */
            imageLink () {
                return this.imgLists[this.imgActive] && this.imgLists[this.imgActive].src || this.imageUrl || this.$store.state.static;
            }
        },
        methods: {
            /* 点击卡片高亮 */
            handleActive () {
                if(!this.disabled && !this.canActive) return;
                this.$emit('input', true);
            },
            /* 选择展示大图 */
            imgSelect (index) {
                this.imgActive = index;
            },
            /* 选中变化 */
            checkChange () {
                this.$emit('checkChange');
            },
            /* 换一款 */
            handleBtn () {
                this.$emit('handleBtn');
            },
            /* 删除 */
            handleDelete () {
                this.$emit('handleDelete');
            },
            /* 收藏控制 */
            collectedClick () {
                this.$emit('collectedClick');
            },
            /* 跳转到详情页 */
            goCommodity () {
                this.$router.push({
                    path: '/commodityDetails',
                    query: {
                        sku: this.code,
                        status: 'first'
                    }
                })
            }
        },
        components: {
            swiper,
            swiperSlide
        },
    }
</script>
